<template>
    <div class="life-articleBox">
        <h2>{{$route.params.id}}凡心所向，素履以往</h2>
        <h3>2017-3-31   浏览量5000</h3>
        <p>不管在哪里，城市化进程及市场经济大潮对乡村世界进行的鲸吞蚕食，都有让乡村失去原有秩序、让精神世界坍塌的“神力”。</p>
        <p>中国作者嗅觉敏锐，笔耕不辍，在近年文学作品中对现实题材多有涉猎。北京十月文艺出版社新近出版了一批优秀作品，其中小说《声音史》以听觉去表现一个村庄的消失，于现实的描绘中体现了一种超现实的力量。《陌上》通过对中国女性的经验与情感进行敏锐捕捉，展现乡村妇人的隐秘心事。《如果大雪封门》将笔端对准城市中那些并不怎么“显眼”的善良的年轻人，他们心中有精神困顿，也有对安定的向往。</p>
        <p>中国作者嗅觉敏锐，笔耕不辍，在近年文学作品中对现实题材多有涉猎。北京十月文艺出版社新近出版了一批优秀作品，其中小说《声音史》以听觉去表现一个村庄的消失，于现实的描绘中体现了一种超现实的力量。《陌上》通过对中国女性的经验与情感进行敏锐捕捉，展现乡村妇人的隐秘心事。《如果大雪封门》将笔端对准城市中那些并不怎么“显眼”的善良的年轻人，他们心中有精神困顿，也有对安定的向往。</p>
        <p>中国作者嗅觉敏锐，笔耕不辍，在近年文学作品中对现实题材多有涉猎。北京十月文艺出版社新近出版了一批优秀作品，其中小说《声音史》以听觉去表现一个村庄的消失，于现实的描绘中体现了一种超现实的力量。《陌上》通过对中国女性的经验与情感进行敏锐捕捉，展现乡村妇人的隐秘心事。《如果大雪封门》将笔端对准城市中那些并不怎么“显眼”的善良的年轻人，他们心中有精神困顿，也有对安定的向往。</p>
        <p>中国作者嗅觉敏锐，笔耕不辍，在近年文学作品中对现实题材多有涉猎。北京十月文艺出版社新近出版了一批优秀作品，其中小说《声音史》以听觉去表现一个村庄的消失，于现实的描绘中体现了一种超现实的力量。《陌上》通过对中国女性的经验与情感进行敏锐捕捉，展现乡村妇人的隐秘心事。《如果大雪封门》将笔端对准城市中那些并不怎么“显眼”的善良的年轻人，他们心中有精神困顿，也有对安定的向往。</p>
        <p>中国作者嗅觉敏锐，笔耕不辍，在近年文学作品中对现实题材多有涉猎。北京十月文艺出版社新近出版了一批优秀作品，其中小说《声音史》以听觉去表现一个村庄的消失，于现实的描绘中体现了一种超现实的力量。《陌上》通过对中国女性的经验与情感进行敏锐捕捉，展现乡村妇人的隐秘心事。《如果大雪封门》将笔端对准城市中那些并不怎么“显眼”的善良的年轻人，他们心中有精神困顿，也有对安定的向往。</p>
        <div class="share" id="share">
            <h2>分享到</h2>
            <div class="shareBox">
                <span>
                  <img src="./img/icon_wechat1@2x.png">
                  <h3>微信</h3>
                </span>
                <span>
                  <img src="./img/icon_friends@2x.png">
                  <h3>朋友圈</h3>
                </span>
                <span>
                  <img src="./img/icon_weibo1@2x.png">
                  <h3>微博</h3>
                </span>
                <span>
                  <img src="./img/icon_tencent1@2x.png">
                  <h3>QQ好友</h3>
                </span>
            </div>
            <h1 @click="closeShare">取消</h1>
        </div>
        <div class="zhezhao" v-show="$store.state.shareShow" @click="closeShare"></div>
    </div>
</template>

<script>
  export default{
    data(){
        return {
            type:false
        }
    },
    methods:{
      closeShare:function (){
        share.style.transform="translate3d(0,10.3rem,0)";
        share.style.webkitTransform="translate3d(0,10.3rem,0)";
        share.style.MozTransform="translate3d(0,10.3rem,0)";
        this.$store.dispatch('closeShow','share');
      }
    }
  }
</script>

<style lang="Sass">
@mixin transform ($sizing) {
    -webkit-transfrom:$sizing;
       -moz-transfrom:$sizing;
            transfrom:$sizing;
}
@mixin transition ($sizing) {
    -webkit-transition:$sizing;
       -moz-transition:$sizing;
            transition:$sizing;
}
    .life-articleBox{width: 100%; padding-top: 2rem; background: #fff; min-height:31.35rem; box-sizing:border-box;  padding-bottom: 3rem;

      h2{font-size: .8rem; line-height: 1.6rem; text-align: center; color: #000; font-weight: normal; margin-top: .5rem;}
      h3{ font-size: .55rem; color: #999; text-align: center; font-weight: normal;}
      p{font-size: .7rem; color: #333; padding: 0 0.5rem 0 0.5rem; box-sizing:border-box; text-align: justify; text-indent: 1rem; margin-top: .5rem;}
      .share{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99; padding-bottom: .25rem; background: #fff; transition:all 0.5s ease; transform:translate3d(0,10.3rem,0);

        h2{text-align: center; font-weight: normal; font-size: .8rem; line-height: 3rem;}
        .shareBox{display: flex; box-sizing:border-box; padding: 0 1rem;

          span{flex:1; display: inline-block; text-align: center;

            img{width: 2.5rem;}
            h3{ font-weight: normal; font-size: .7rem; text-align: center; margin-top: 0; }
          }
        }
        h1{font-size: .8rem; font-weight: normal; text-align: center; line-height: 1.6rem; margin-top: 1.5rem;}
      }
      .zhezhao{width: 100%; height: 100%; background: #000; opacity: 0.7; position: fixed; left: 0; top: 0; z-index: 98;}
    }
</style>